<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">积分明细</block>
		</cu-custom>
		<view class="qui-cells solid-top">
			<view class="qui-cell">
				<view class="cell-hd flex align-center" @tap="showModal" data-target="DialogModal">
					<text :class="modalName != 'topModal' ? 'fs26 fw600' : 'text-orange'" v-text="CommissionKindTip">全部</text>
					<view :class="modalName != 'topModal' ? 'arrow-bottom' : 'arrow-bottom arrow-top'"></view>
				</view>
				<view class="cell-bd tr"><image :src="imgurl + '/icon_search.png'" class="img30"></image></view>
			</view>
		</view>
		<view class="cu-modal bottom-modal" :class="modalName == 'topModal' ? 'show' : ''">
			<view class="cu-dialog" style="text-align: left;">
				<view class="qui-cells" style="padding-bottom: 100rpx;">
					<view class="qui-cell border_none"><view class="cell-hd fs26 fw600">快捷筛选</view></view>
					<view class="qui-cell border_none pt0 pb0" style="flex-wrap: wrap;">
						<view class="cell-bd" v-for="(item, index) in CommissionKindTipList" style="white-space: nowrap;flex: none;">
							<view :class="paymentIndex != index ? 'num' : 'num num1'" @tap="filterByCommissionKindTip(item, index)">{{ item }}</view>
						</view>
					</view>
					<view class="qui-cell border_none"><view class="cell-hd fs26 fw600">数值区间</view></view>
					<view class="qui-cell align-center justify-around pt0">
						<view class="flex radius10" style="border: 1rpx solid #e9e9e9;padding: 20rpx;">
							<text class="fs24 fw600">￥</text>
							<input type="number" class="ff fs28 ml20 " placeholder="最低数值" v-model="MinValue" />
						</view>
						<view class="text-gray ml10 mr10">-</view>
						<view class="flex radius10" style="border: 1rpx solid #e9e9e9;padding: 20rpx;">
							<text class="fs24 fw600">￥</text>
							<input type="number" class="ff fs28 ml20 " v-model="MaxValue" placeholder="最高数值" />
						</view>
					</view>
				</view>

				<view class="cu-bar bg-white flex tc solid-top fs30">
					<view class="fw600" style="flex: 1;line-height: 100rpx;" @tap="reset">重置</view>
					<view class="text-white fw600" @tap="filterByCommissionKindTipBtn" style="background-color: #ff5e1f;flex: 1;line-height: 100rpx;">确定</view>
				</view>
			</view>
		</view>

		<view class="qui-cells bg-transparent">
			<view class="qui-cell">
				<view class="cell-hd flex align-center">
					<picker mode="date" fields="month" :value="date" start="2015-01" :end="maxmonth" @change="DateChange">
						<view class="picker fs26 fw600" v-if="isFilter">{{ date }}</view>
						<text class="fs26 fw600" v-if="!isFilter">月份</text>
					</picker>

					<view class="arrow-bottom"></view>
				</view>
				<view class="cell-bd tr fs22 text-gray fw500ss">
					<text class="mr20">
						收入
						<text v-text="income"></text>
					</text>
					<text>
						支出
						<text v-text="output"></text>
					</text>
				</view>
			</view>
		</view>
		<view class="qui-cells">
			<view class="qui-cell" v-for="(item, index) in CommissionLog" :key="index" @tap="go(item)">
				<view class="cell-hd"><image :src="imgurl+ bindLogo(item.tip,item.state)" class="img54"></image></view>
				<view class="cell-bd">
					<view><text class="fs28 fw600" v-text="item.Msg"></text></view>
					<view class="fs20 text-muted" v-text="item.CreateTime"></view>
				</view>
				<view class="cell-ft tr">
					<view :class="bindClass(item.state, item.CommissionKindID, item.BusinessID)"><text v-text="item.CommissionMoney"></text></view>
					<view class="fs20 text-muted" v-text="bindState(item.state, item.CommissionKindID, item.BusinessID)"></view>
				</view>
			</view>
		</view>

		<uni-load-more :status="loadmore" :content-text="loadmoretips"></uni-load-more>
	</view>
</template>

<script>
import uniLoadMore from '@/common/components/uni-load-more/uni-load-more.vue';
import base from 'utils/base.js';
Date.prototype.format = function(fmt) {
	var o = {
		'M+': this.getMonth() + 1, //月份
		'd+': this.getDate(), //日
		'h+': this.getHours(), //小时
		'm+': this.getMinutes(), //分
		's+': this.getSeconds(), //秒
		'q+': Math.floor((this.getMonth() + 3) / 3), //季度
		S: this.getMilliseconds() //毫秒
	};
	if (/(y+)/.test(fmt)) {
		fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
	}
	for (var k in o) {
		if (new RegExp('(' + k + ')').test(fmt)) {
			fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));
		}
	}
	return fmt;
};

export default {
	components: { uniLoadMore },
	data() {
		return {
				imgurl: this.$imgurl,
			CommissionLog: [],
			loadmoretips: { contentdown: '上拉显示更多', contentrefresh: '正在加载...', contentnomore: '没有更多数据了' },
			loadmore: 'more',
			CommissionKindTip: '全部',
			paymentIndex: 0,
			imgurl: this.$imgurl,
			modalName: null,
			checkmoney: true,
			PIndex: 1,
			PageSize: 10,
			total: 0,
			date: '2019-12',
			CommissionKindTipList: ['全部', '充值', '导购', '赠', '购物', '退款', '分销', '营销', '转赠'],
			MaxValue: null,
			MinValue: null,
			isFilter: false,
			output: 0,
			income: 0,
			date: '',
			maxmonth: ''
		};
	},
	mounted() {
		
		
		let currentPage = this;
		let time = 0;
			let globalData = getApp().globalData;
		let current = this;
		let si = setInterval(function() {
			time = time + 1;
			if (globalData.ticket) {
			currentPage.GetCommissionLogPageList();
			currentPage.Statistics();
				clearInterval(si);
			}
			if (time > 40) clearInterval(si);
		}, 200);
	},
	onLoad: function(option) {
		if(option.tip)
		{
			this.CommissionKindTip=unescape(option.tip);
		}
		var time1 = new Date().format('yyyy-MM');
		this.date = time1;
		this.maxmonth = time1;
	},
	methods: {
		showModal(e) {
			this.modalName = 'topModal';
		},
		reset: function() {
			this.modalName = null;
			this.paymentIndex = 0;
			this.PIndex = 1;
			this.MaxValue = null;
			this.MinValue = null;
			this.CommissionKindTip = '全部';
			this.date = '2019-12';
			this.isFilter = false;
			this.GetCommissionLogPageList();
			this.Statistics();
		},
		go: function(item) {
			if (item.BusinessID > 0) {
				if (item.CommissionKindID == 22) {
					if(item.Msg.indexOf('零钱充值')>-1)
					uni.navigateTo({
						url: '/pages/my/rechargeDetail?CommissionKindID=' + item.CommissionKindID + '&BusinessID=' + item.BusinessID + '&ID=' + item.ID + '&tip=' + item.tip
					});
					else uni.navigateTo({
						url: '/pages/my/PointsRechargeDetail?CommissionKindID=' + item.CommissionKindID + '&BusinessID=' + item.BusinessID + '&ID=' + item.ID + '&tip=' + item.tip
					});
				}
			} else {
				uni.navigateTo({
					url: '/pages/my/tradeSuccess?ID=' + item.ID + '&tip=' + item.tip
				});
			}
		},
		filterByCommissionKindTipBtn: function() {
			this.modalName = null;
			this.PIndex = 1;
			this.GetCommissionLogPageList();
			this.Statistics();
		},
		filterByCommissionKindTip: function(CommissionKindTip, paymentIndex) {
			this.CommissionKindTip = CommissionKindTip;
			this.paymentIndex = paymentIndex;
			this.isFilter = false;
		},
		DateChange(e) {
			this.date = e.detail.value;
			this.isFilter = true;
			this.PIndex = 1;
			this.GetCommissionLogPageList();
			this.Statistics();
		},
		bindLogo: function(tip,state) {
			if (tip == '提现') return 'img05.png';
			else if (tip == '分销') return 'img09.png';
			else if (tip == '购物') return 'img08.png';
			else if (tip == '退款') return 'img07.png';
			else if (tip == '赠') return 'img09.png';
			else if (tip == '转赠') return 'img09.png';
			else if (tip == '充值') {
				if(state==1) return 'img07.png';
				return 'img06.png';
			}
		},
		bindState: function(state, commissionKindID, BusinessID) {
			if (commissionKindID == 18 || commissionKindID == 21) {
				if (BusinessID == 0) return '未知状态';
				if (state == 0) return '待审核';
				else if (state == 1) return '完成提现';
				else if (state == 2) return '审核不通过';
				else if (state == 3) return '打款异常';
			}else
				if (commissionKindID == 22) {
					if (BusinessID == 0) return '未知状态';
					if (state == 1) return '待审核';
					else if (state == 2) return '完成充值';
					else if (state == 3) return '审核不通过';
				
			}
			return '';
		},
		bindClass: function(state, commissionKindID, BusinessID) {
			if (commissionKindID == 18 || commissionKindID == 21) {
				if (state == 2 || state == 3) return 'fs30 ff text-orange';
			}else if (commissionKindID == 22) {
				if (state == 1 || state == 3) return 'fs30 ff text-orange';
			}
			return 'fs30 ff';
		},
		Statistics: function() {
			let currentPage = this;
			let globalData = getApp().globalData;
			let da = currentPage.date;
			if (!currentPage.isFilter) da = '';
			let params = {
				hideLoading: true,
				type: 'POST',
				url: '/api/UserInfo/SumCommissionLog',
				data: {
					kind: 2,
					Month: da
				},
				sCallback: function(response) {
					if (response.IsSuccess) {
						currentPage.income = response.Data.income;
						currentPage.output = response.Data.output;
					} else {
						uni.showToast({
							title: response.Msg
						});
					}
				}
			};
			base.request(params);
		},
		GetCommissionLogPageList: function() {
			let currentPage = this;
			let globalData = getApp().globalData;
			if (currentPage.PIndex > currentPage.total / currentPage.PageSize + 1) {
				currentPage.loadmore = 'noMore';
				return;
			}
			currentPage.loadmore = 'loading';
			var CommissionKindTip = currentPage.CommissionKindTip;
			if (CommissionKindTip == '全部') CommissionKindTip = '';
			let da = currentPage.date;
			if (!currentPage.isFilter) da = '';
			let params = {
				hideLoading: true,
				type: 'POST',
				url: '/api/UserInfo/GetCommissionLogPageList',
				data: {
					PIndex: currentPage.PIndex,
					PageSize: currentPage.PageSize,
					CommissionKindTip: CommissionKindTip,
					MinValue: currentPage.MinValue,
					MaxValue: currentPage.MaxValue,
					Month: da,
					kind: 2
				},
				sCallback: function(response) {
					if (response.IsSuccess) {
						let list = response.Data.Item1;
						if (list != null && currentPage.PIndex > 1) currentPage.CommissionLog = currentPage.CommissionLog.concat(list);
						else currentPage.CommissionLog = list;

						currentPage.PIndex = currentPage.PIndex + 1;
						currentPage.total = response.Data.Item2;
						if (list == null || list.length <= 0) currentPage.loadmore = 'noMore';
						else currentPage.loadmore = 'more';
					} else {
						uni.showToast({
							title: response.Msg
						});
					}
				}
			};
			base.request(params);
		}
	},

	onReachBottom: function(e) {
		let currentPage = this;
		if (currentPage.PIndex > 1) currentPage.GetCommissionLogPageList();
	}
};
</script>

<style lang="scss">
//向下的箭头
.arrow-bottom {
	width: 0;
	height: 0;
	display: inline-block;
	border-width: 10rpx;
	border-style: solid;
	border-color: #4c4c4c transparent transparent transparent;
	position: relative;
	top: 6rpx;
	left: 15rpx;
}

//向上的箭头
.arrow-top {
	transform: rotate(180deg);
	position: relative;
	top: -6rpx;
	border-color: #ff5e1f transparent transparent transparent;
}

.round {
	width: 12rpx;
	height: 12rpx;
	background-color: #f63535;
	border-radius: 50%;
	display: inline-block;
}

.img30 {
	width: 30rpx;
	height: 30rpx;
	position: relative;
	top: 2rpx;
}

.img54 {
	width: 54rpx;
	height: 54rpx;
}

.cu-dialog {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
}

.cu-modal {
	top: 196rpx;
}

.num {
	line-height: 82rpx;
	height: 82rpx;
	border-radius: 5rpx;
	background-color: #f7f7f7;
	text-align: center;
	font-size: 28rpx;
	font-weight: 600;
	margin-right: 20rpx;
	min-width: 150rpx;
	margin-bottom: 20rpx;
}

.num1 {
	border: solid 2rpx #ff5e1f;
	color: #ff5e1f;
	background-color: #ffffff;
	background: url(../../static/images/icon_check01.png) no-repeat right bottom;
	background-size: 36rpx 36rpx;
}

.uni-picker-view-group:last-child {
	display: none !important;
}
</style>
